<template>
  <el-dialog title="发货单" v-model="visible" width="70%" append-to-body class="order-detail">
    <el-collapse v-model="activeCollapses" v-for="info in formData">
      <el-collapse-item :title="'订单编号:' + info.orderNo" name="1">
        <el-table :data="info.orderItemList"
                  style="width: 100%"
                  :preserve-expanded-content="false"
                  default-expand-all>
          <el-table-column type="expand">
            <template #default="props">
              <div style="margin-left: 60px" v-if="props.row.goodsCount > 0">
                <el-table :data="props.row.children">
                  <el-table-column label="发货数量" align="center" prop="goodsCount" >
                    <template #default="scope">
                      <el-input v-model="scope.row.num" @input="handleNumChange" placeholder="请输入数量" />
                    </template>
                  </el-table-column>
                  <el-table-column label="物流公司" align="center" prop="logisticsCompany" >
                    <template #default="scope">
                      <el-input v-model="scope.row.logisticsCompany" placeholder="请输入物流公司" />
                    </template>
                  </el-table-column>
                  <el-table-column label="物流单号" align="center" prop="logisticsNumber" >
                    <template #default="scope">
                      <el-input v-model="scope.row.logisticsNumber" placeholder="请输入物流单号" />
                    </template>
                  </el-table-column>
<!--                  <el-table-column label="运费" align="center" prop="freightPrice" >-->
<!--                    <template #default="scope">-->
<!--                      <el-input v-model="scope.row.freightPrice" placeholder="请输入运费" />-->
<!--                    </template>-->
<!--                  </el-table-column>-->
                  <el-table-column label="" align="center">
                    <template #default="scope">
                      <el-button type="primary" :icon="Plus" plain circle @click="handleAdd(props.row.children)" />
                      <el-button v-if="scope.$index > 0" type="danger" :icon="Delete" plain circle @click="handleDelete(props.row.children,scope.$index)" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCoverImg" label="商品主图">
            <template #default="scope">
              <el-image style="width: 70px; height: 70px" :src="scope.row.goodsCoverImg" />
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" />
          <el-table-column prop="code" label="商品编码" />
          <el-table-column prop="specs" label="商品规格" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="goodsCount" label="数量" />
          <el-table-column prop="sellingPrice" label="单价" />
          <el-table-column prop="allPrice" label="商品金额" />
        </el-table>
      </el-collapse-item>
    </el-collapse>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {batchShipOrderOperate, getOrder} from '@/api/business/order.js'
import {
    Plus,
    Delete,
} from '@element-plus/icons-vue'
const visible = ref(false)
const activeCollapses = reactive(['1', '2', '3', '4'])
const info = reactive({})
// const logisticsItem = reactive({})
const formData = ref([])
const { proxy } = getCurrentInstance();
const emit = defineEmits(['refresh'])

const init = (ids) => {
  visible.value = true
  formData.value = [];
  ids.forEach(id => {
    getOrder(id).then(res => {
      res.data.orderItemList.forEach(item => {
        let count = 0;
        res.data.logisticsList.forEach(logis => {
          logis.logisticsDetailList.forEach(detail => {
            if (detail.goodsId === item.goodsId) {
              count += detail.goodsCount;
            }
          })
        })
        item.goodsCount = item.goodsCount - count;
        item['children'] = [{
          num:'',
          logisticsCompany:'',
          logisticsNumber:'',
          freightPrice:'',
        }];
      })
      formData.value.push(res.data);
    })
  })

}

const handleNumChange = (val) => {
  // console.log(val);
}
const handleAdd = (children) => {
  let json = {
    num:'',
    logisticsCompany:'',
    logisticsNumber:'',
    freightPrice:'',
  }
  children.push(json)
}

const handleDelete = (children,index) => {
  children.splice(index,1)
}

const handleSubmit = () => {
  proxy.$modal.confirm('是否确认？').then(function () {
    let params = [];
    formData.value.forEach(item => {
      let obj = {
        orderId:item.id,
        orderNo:item.orderNo,
        logisticsDetailList:[],
      }
      item.orderItemList.forEach(shop => {
        shop.children.forEach(child => {
          let goods = {
            goodsId:shop.goodsId,
            goodsNum:child.num,
            logisticsCompany:child.logisticsCompany,
            logisticsNumber:child.logisticsNumber,
            freightPrice:child.freightPrice,
          }
          if (child.num.length > 0) {
            obj.logisticsDetailList.push(goods);
          }
        })
      })
      params.push(obj);
    });
    // console.log('params is',params);
    let body = {
      list:params
    }
    batchShipOrderOperate(body).then(res => {
      console.log('res is',res);
      visible.value = false;
      emit("refresh")
      proxy.$modal.msgSuccess("发送成功");
    });

  }).then(() => {
  }).catch(() => { });
}



defineExpose({
  init
});
</script>

<style lang="scss">
.order-detail {
  .el-dialog__body {
    padding-top: 0;

    .el-collapse {
      border-bottom: none;

      .el-collapse-item {
        margin-bottom: 10px;
        border: 1px solid #ebeef5;

        .el-collapse-item__header {
          background: #f5f7fa;
          padding: 0 10px;
        }

        .el-collapse-item__wrap {
          padding: 10px;
        }

        .el-collapse-item__content {
          padding-bottom: 0;
        }
      }

    }


  }
}
</style>